<template>
    <div>
        <div class="card_top">
            <div v-for="(value, key, index) in jsondata.headinfo" :key="key" :title="key" :value="value">
                <div>
                    <div v-if="index === 0" class="card_top_large" v-html="value"></div>
                    <div v-else class="card_top_small">
                        <div style="margin: 1.32vw 2.13vw;">
                            <span class="card_top_small_item"> {{ key }}：<span v-html="value"></span> </span>
                            <span class="card_top_small_item" v-if="key == '签到时间'" style="color: #C1C1C1; float: right;">
                                <span v-if="value">已签到</span>
                                <span v-else style="color: rgba(255, 0, 0, 0.5);">未签到</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <tag :tags="jsondata.tags" :botags="jsondata.botags" v-if="jsondata.hastag === 1" :bo="idobject" :id="cardid"></tag>
            <van-skeleton title :row="3" :loading="!jsondata.headinfo" />
        </div>
        <div style="background-color: #F9F9FA; height: 7px; width: 100%;"></div>
    </div>
</template>
<script>
import tag from '@/components/Tag.vue'
import Vue from 'vue'
import { Popover, Skeleton, Search, List, Cell, PullRefresh, Toast, Tabbar, TabbarItem, Popup, DatetimePicker, ActionSheet, Tab, Tabs, Collapse, CollapseItem, Dialog, Uploader, Rate, Icon, Form, Sticky, Image, Loading, Step, Steps, NoticeBar, Swipe, SwipeItem } from 'vant'
Vue.use(Popover).use(Skeleton).use(Search).use(List).use(Cell).use(PullRefresh).use(Toast).use(Tabbar).use(TabbarItem).use(Popup).use(DatetimePicker).use(ActionSheet).use(Tab).use(Tabs).use(Collapse).use(CollapseItem).use(Dialog).use(Uploader).use(Rate).use(Icon).use(Form).use(Sticky).use(Image).use(Loading).use(Step).use(Steps).use(NoticeBar).use(Swipe).use(SwipeItem)
export default {
    data: function () {
        return {
        }
    },
    components: { tag },
    props: {
        jsondata: {
            type: Object,
            required: false
        },
        cardid: {
            type: String,
            required: false
        }
    },
    mounted: function () {
        //console.log('head jsondata', this.jsondata)
    },
    methods: {
    }
}
</script>
<style>
.card_top {
    padding: 10px 15px 1.92vw 15px;
}
.card_top .card_top_large {
    font-size:20px;
    padding-bottom: 10px;
    margin: 10px auto;
    overflow: hidden;

}
.card_top .card_top_small {
    font-size:14px;
    border: 1px solid #EBEBEB;
    /*display: flex;
    justify-content: space-between;
    padding: 1.32vw 2.13vw;
    overflow: hidden;*/
    /*white-space: nowrap;  */

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card_top_small_item {
}
</style>
